<template>
  <div class="pages addMaterial">
    <div class="operationBox tableSearch">
      <el-button size="mini" type="primary" @click="save_good">选择</el-button>
      <el-button size="mini" @click="close()">取消</el-button>
    </div>
    <div class="tableSearch tableSearchs">
      <i class="el-input__icon el-icon-search" @click="search()"></i>
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="" label-width="15px">
          <el-input class="input" v-model="keyword" size="small" placeholder="输入商品名称或编号"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList" :row-key="getRowKeys" stripe border ref="multipleTable" tooltip-effect="dark" @selection-change="changeFun_good">
      <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
      <!-- <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> -->
      <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="goodsUnit" label="单位" align="center"></el-table-column>
      <!-- <el-table-column prop="goodsSpec" label="规格型号" align="center">
        <template slot-scope="scope">
          <div v-for="(item, index) in  scope.row.goodsSpec" :key="index">
            <span>{{item.name}} :</span>
            <span>{{item.value}} </span>
          </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="purchasePrice" label="单价" align="center"></el-table-column> -->
      <el-table-column prop="goodsQuantity" label="库存数量" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "add-material",
  props: {
    dataList: [],
    deleteList: []
  },
  data () {
    return {
      getRowKeys (row) {
        return row.id;
      },
      keyword: "",
      chooseData: []
    };
  },
  watch: {
    deleteList: function (val) {
      this.toggleSelection(val);
    },
    deep: true
  },
  methods: {
    search () {
      this.$emit("keyword", this.keyword);
    },
    save_good () {
      // 点击选择完成 导出数据
      if (this.chooseData.length === 0) {
        this.$message({
          type: "error",
          message: "请先选择商品!"
        });
      } else {
        let tableData = [];
        tableData = this.chooseData;
        this.$emit("chooseDone", tableData);
      }
    },
    changeFun_good (val) {
      this.chooseData = val;
    },
    toggleSelection (rows) {
      if (rows) {
        this.$refs.multipleTable.clearSelection();
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    close () {
      this.$emit("close");
    }
  }
};
</script>
<style scoped>
.th-right {
  margin-left: 568px;
}
.tableSearchs {
  position: relative;
}
.tableSearchs .el-input__icon {
  position: absolute;
  top: 12px;
  left: 190px;
  z-index: 10;
  width: 25px;
  height: 35px;
}
</style>
